<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="ID" prop="id" width="70px" align="center">
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <!-- 文章标题 -->
      <el-table-column
        label="文章标题"
        prop="title"
        width="200px"
        align="center"
      >
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </template>
      </el-table-column>

      <!-- 文章内容 -->
      <el-table-column
        label="文章内容"
        prop="articleContent"
        header-align="center"
      >
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.content }}</span>
        </template>
      </el-table-column>

      <!-- 文章分类 -->
      <el-table-column
        label="文章分类"
        prop="publishDate"
        width="100px"
        align="center"
      >
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.articleType }}</span>
        </template>
      </el-table-column>

      <!-- 文章简介 -->
      <el-table-column
        label="文章简介"
        prop="updateTime"
        width="100px"
        align="center"
      >
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.articleDetails }}</span>
        </template>
      </el-table-column>

      <!-- 创建时间 -->
      <el-table-column
        label="创建时间"
        prop="createdTime"
        width="100px"
        align="center"
      >
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.createdTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <table>
            <tr>
              <td>
                <!-- 搜索框 -->
                <el-input
                  v-model="search"
                  size="mini"
                  placeholder="输入关键字搜索"
                />
              </td>
              <td>
                <el-tooltip
                  content="开始搜索"
                  placement="bottom"
                  effect="light"
                >
                  <el-button
                    icon="el-icon-search"
                    size="mini"
                    circle
                    @click="query"
                  ></el-button>
                </el-tooltip>
              </td>
              <td>
                <!-- 发布文章 -->
                <el-tooltip
                  content="发布文章"
                  placement="bottom"
                  effect="light"
                >
                  <el-button
                    type="success"
                    @click="publish"
                    style="width: 40px; font-size: 20px; margin-left: 35px"
                    size="medium"
                    icon="el-icon-plus"
                    circle
                  ></el-button>
                </el-tooltip>
              </td>
            </tr>
          </table>
        </template>
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">{{
            scope.row.iscarousel ? "取消轮播图" : "设置轮播图"
          }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getArticle, editCarousel, queryarticle } from "../../../api/index";
export default {
  data() {
    return {
      dialogFormVisible: false,
      tableData: [
        {
          id: "",
          title: "",
          content: "",
          articleType: "",
          articleDetails: "",
        },
      ],
      formData: {},
      search: "",
    };
  },
  methods: {
    query() {
      var _input = this.search;
      if (_input.trim().length > 0) {
        queryarticle({ query: _input })
          .then((data) => {
            var res = data.data.data;
            if (res.length > 0) {
              this.queryData = data.data.data;
              var list = [];
              res.forEach((element) => {
                console.log(element);

                this.tableData.forEach((e) => {
                  if (e.id === element.article.id) {
                    var tmp = {
                      articleDetails: element.article.articleDetails,
                      articleType: element.article.articleType,
                      content: element.article.content,
                      createdTime: element.article.createdTime,
                      id: element.article.id,
                      imgId: element.article.imgId,
                      imgPath: element.imgPath,
                      iscarousel: e.iscarousel,
                      title: element.article.title,
                      userId: element.article.userId,
                      username: e.username,
                    };
                    list.push(tmp);
                  }
                });
              });
              console.log(list);
              this.tableData = list;
              this.$message("查询成功");
            } else {
              this.$message.error("未查找到文章，请查询其它内容");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    handleEdit(index, row) {
      //   this.dialogFormVisible = true;
      var articleId = row.id;
      var imgId = parseInt(this.tableData[index].imgId);
      var res = {
        ImgId: imgId,
        ArticleId: articleId,
      };
      editCarousel(res)
        .then((data) => {
          console.log(data.data);
          if (data.data.code === 200) {
            this.tableData[index].iscarousel = !this.tableData[index]
              .iscarousel;
          }
        })
        .catch((err) => {
          console.log(err);
        });

      // console.log(index, row);
    },
    publish() {
      this.$router.push("/backstage/editor");
    },
    //拉取数据
    pullData() {
      //获取文章信息
      getArticle()
        .then(({ data }) => {
          console.log(data.data);

          this.tableData = data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.pullData();
  },
};
</script>

<style></style>
